/*
 * 精品推荐
 * @Author: yudong
 * @Date: 2018-04-08 16:49:50
 * @Last Modified by: ljb
 * @Last Modified time: 2019-05-15 18:45:38
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .v-user-recommend {
        padding-bottom: 16*@rem-per-px;
        background-color: @background-color;
        box-sizing: border-box;
        /*没有测肤记录*/
        .no-skin-test {
            width: 100%;
            height: 100%;
            padding-top: 166*@rem-per-px;
            text-align: center;
            background-color: @main-background;
            box-sizing: border-box;
            .no-test-image {
                width: 316*@rem-per-px;
                height: 240*@rem-per-px;
            }
            .tip {
                margin-top: 70*@rem-per-px;
                margin-bottom: 16*@rem-per-px;
                font-size: @main-font;
                font-weight: bold;
                text-align: center;
                color: @main-font-color;
            }
            .text {
                text-align: center;
                font-size: @sub-info-font;
                color: @info-color;
            }
        }
        /*没有测肤记录 END*/
    }
</style>
<template>
	<div
		v-show="show_page"
		class="v-user-recommend">
		<card-cell
			v-for="(item,index) in getSkinRecords"
			:key="index"
			:title-icon="item.store_img"
			:text="item.store_name"
			:time="item.created_at"
			:content="item.skin_data"
			:content-icon="skin_detector_map[item.skin_detector_id]"
			@click.native="recordDetail(item.skin_detector_id,item.id)"/>
		<div
			v-if="getSkinRecords.length === 0"
			class="no-skin-test">
			<img
				:src="no_test_image"
				class="no-test-image"
				alt="">
			<div class="tip">{{ $t('report.no_record_tip') }}</div>
			<div class="text">{{ $t('report.no_record_text') }}</div>
		</div>
	</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex';

import cardCell from 'src/views/component/card';

import { formaturl, setScreenHeight } from 'src/utils/utils';

export default {
	name: 'Recommend',
	components: {
		cardCell,
	},

	data() {
		return {

			request_param: {
				openid: '',
				appid: '',
				customer_id: '',
				store_id: '',
			}, // openid和appid，用于请求报告列表和报告详情

			show_page: false,

			no_test_image: require('src/assets/media/img/user/records/nocontent.png'),

			skin_detector_map: {

				1: require('src/assets/media/img/user/records/photo_record_img.png'),

				2: require('src/assets/media/img/user/records/img_record_img.png'),

				3: require('src/assets/media/img/user/records/touch_record_icon.png'),
			},
		};
	},

	computed: {

		...mapGetters('userInfo', [
			'getUserInfo',
			'getAppid',
		]),

		...mapGetters('skinRecords', [
			'getSkinRecords',
		]),

	},

	mounted() {
		this.judgeUrlParam()
			.then(() => {
				this.show_page = true;

				this.$nextTick(() => {
					setScreenHeight('v-user-recommend');
					setScreenHeight('no-skin-test');
				});
			});
	},

	methods: {

		...mapActions('skinRecords', [
			'fetchSkinRecords',
			'fetchSkinRecordDetail',
		]),

		/**
         * 判断网址参数，如果有参数，使用网址参数里面的openid和appid，没有则使用默认的state里面的
         * @return {promise} 获取肤质检测报告
         */
		judgeUrlParam() {
			const url_param = formaturl();

			if (url_param.openid && url_param.appid) {
				this.request_param.openid = url_param.openid;

				this.request_param.appid = url_param.appid;

				this.request_param.customer_id = url_param.customer_id || '';

				this.request_param.store_id = url_param.store_id || '';
			} else {
				this.request_param.openid = this.getUserInfo.openid;

				this.request_param.appid = this.getAppid;
			}

			return this.fetchSkinRecords(this.request_param);
		},

		/**
         * 报告详情
         * @param  {number} skin_detector_id {肤质检测仪id}
         * @param  {number} record_id        {检测报告id}
         * @return {undefined}
         */
		recordDetail(skin_detector_id, record_id) {
			const param = {

				appid: this.request_param.appid,

				openid: this.request_param.openid,

				id: record_id,

			};

			this.fetchSkinRecordDetail(param)
				.then((status) => {
					if (!status) return;

					this.routerPushAccordingToType(skin_detector_id);
				});
		},

		/**
         * 根据skin_detector_id进行不同的路由跳转
         * @param  {string} skin_detector_id {测肤仪id}
         * @return {undefined}
         */
		routerPushAccordingToType(skin_detector_id) {
			const self = this;

			switch (parseInt(skin_detector_id, 10)) {
			// 1是跳转拍照检测报告
			case 1:

				self.$router.push({

					path: '/photo-skin-report',

				});

				break;
				// 2是跳转3D测肤报告
			case 2:

				self.$router.push({

					path: '/image-skin-report',

				});

				break;
				// 3是跳转接触检测报告
			default:

				self.$router.push({

					path: '/touch-skin-report',

				});

				break;
			}
		},

	},
};
</script>
